<template>
    <div class="my-box">
        <div v-if="userInfo &&userInfo.nickname" class="my-info ui-v-a">
            <div class="my-avatar">
                <img :src="userInfo.avatar">
            </div>
            <div class="my-nickname">
                {{userInfo.nickname}}
            </div>
        </div>

        <div v-else class="my-info ui-v-a" @click="login">
            <div class="my-avatar">
                <img src="http://img.meizhanggui.cc/resources/def_avatar.png">
            </div>
            <div class="my-nickname">
                登录
            </div>
            <div class="ui-more"></div>
        </div>

        <div class="ui-box">
            <div class="ui-bar ui-v-a" @click="checkAndGoto({name:'orders'})">
                全部订单
                <div class="ui-more"></div>
            </div>
            <div class="ui-bar ui-v-a" @click="checkAndGoto({name:'coupons'})">
                我的优惠券
                <div class="ui-more"></div>
            </div>

            <div class="ui-bar ui-v-a" @click="checkAndGoto({name:'addresses'})">
                我的地址
                <div class="ui-more"></div>
            </div>

            <div class="ui-bar ui-v-a" @click="checkAndGoto({name:'cart'})">
                购物车
                <div class="ui-more"></div>
            </div>


        </div>
    </div>

</template>

<script>
    import Auth from '../services/auth';

    export default{
        data(){
            return {
                userInfo: {
                    nickname: null,
                    avatar: null
                }
            };
        },

        attached(){
            var out = this;
            Auth.promise.done(function () {
                out.userInfo = db.get('userInfo');
            });
        },
        methods: {
            checkAndGoto: function (pathInfo) {
                if (Auth.isLogin)
                    this.$route.router.go(pathInfo);
                else
                    this.$dispatch('need-login');
            },

            login: function () {
                this.$dispatch('need-login');
            }
        }
    }
</script>

<style scoped>
    .my-box {
    }

    .my-info {
        height: 80px;
        padding: 0 10px;
        background: #f5f1ec;

    }

    .my-avatar {
        margin: 0 10px;
        width: 60px;
        height: 60px;
        border-radius: 999px;
        border: solid 1px #dddddd;
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
    }

    .my-avatar > img {
        width: 100%;
        height: 100%;
    }

    .my-nickname {
        font-size: 14px;
        display: inline-block;
        vertical-align: middle;
    }

    .my-tab {
        border-top: solid 1px #d2bfa4;
        margin: 5px;
        text-align: center;
    }

    .ui-box {
        background-color: #fafafa;
    }

    .my-tab-box {
        width: 25%;
        float: left;
        padding: 8px 0 4px 0;
    }

    .my-tab-title {
        font-size: 10px;
    }

    .my-tab-number {
        font-size: 12px;
        font-weight: normal;
    }

    .ui-bar {
        font-size: 14px;
        background-color: #fff;
        border-bottom: solid 1px #f0f0f0;
    }

    .ui-bar:last-child {
        margin-top: 34px;
        border-bottom: none;
        border-top: solid 1px #f0f0f0;
    }

</style>